<template>
  <div>
    <el-input v-model="search" placeholder="输入关键字搜索" />
    <el-button type="primary" @click="openAdd">添加服務</el-button>
    <el-dialog
      title="添加商品"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
    >
      <el-form label-width="80px">
        <el-form-item label="商品名称">
          <el-input v-model="newArr.name"></el-input>
        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model.number="newArr.price"></el-input>
        </el-form-item>
        <el-form-item label="简介">
          <el-input
            type="textarea"
            :rows="2"
            v-model="newArr.desc"
            placeholder="请输入内容"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="sureAdd">确认添加</el-button>
        <el-button type="primary" @click="centerDialogVisible = false"
          >取 消</el-button
        >
      </span>
    </el-dialog>

    <el-table
      :data="
        serverStu.rows.filter(
          (data) =>
            !search ||
            data.name.toLowerCase().includes(search.toLowerCase()) ||
            data.price.toLowerCase().includes(search.toLowerCase())
        )
      "
      border
      style="width: 100%"
    >
      <el-table-column label="商品名称" prop="name"> </el-table-column>
      <el-table-column label="价格" prop="price"> </el-table-column>
      <el-table-column label="简介" prop="desc"> </el-table-column>
      <el-table-column align="right" label="操作" width="180">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <template>
      <div class="block">
        <el-pagination
          @size-change="sizeChange"
          @current-change="currentChange"
          :page-sizes="[4, 10, 15]"
          :page-size="4"
          layout="total, sizes, prev, pager, next, jumper"
          :total="serverStu.total"
        >
        </el-pagination>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      centerDialogVisible: false,
      search: "",
      newArr: {
        name: "", // 服务名称
        price: "", // 服务价格
        desc: "", // 服务描述
        adminId: "", // 门店所属管理员id
        shopsId: [], // 所属门店id
      },
      falter: false,
      _id: "",
    };
  },
  methods: {
    openAdd() {
      this.centerDialogVisible = true;
      this.newArr.name = ""; // 服务名称
      this.newArr.price = ""; // 服务价格
      this.newArr.desc = ""; // 服务描述
      this.newArr.shopsId = []; // 所属门店id
    },
    sureAdd() {
      if (this.falter) {
        this.newArr._id = this._id;
        this.$store.commit("server/udtStu", this.newArr);
        this.falter = false;
        this.centerDialogVisible = false;
      } else {
        this.$store.commit("server/addStu", this.newArr);
        this.centerDialogVisible = false;
      }
    },
    sizeChange(val) {
      this.$store.dispatch("server/get", { id: "", current: "", size: val });
    },
    currentChange(val) {
      this.$store.dispatch("server/get", { id: "", size: "", current: val });
    },
    handleEdit(index, row) {
      this.newArr.name = row.name;
      this.newArr.price = row.price;
      this.newArr.desc = row.desc;
      this.newArr.adminId = row.adminId;
      this.newArr.shopsId = row.shopsId;
      this.falter = true;
      this.centerDialogVisible = true;
      this._id = row._id;
    },
    handleDelete(index, row) {
      this.$store.commit("server/dltStu", row._id);
      let id = "";
      let admid = localStorage.getItem("Jurisdiction");
      if (admid == 2) {
        id = localStorage.getItem("ID");
        this.newArr.adminId = id;
      }
      this.$store.dispatch("server/get", { id: id, size: "", current: "" });
    },
  },
  computed: {
    serverStu() {
      return this.$store.getters.serverStu;
    },
  },
  created() {
    let id = "";
    let admid = localStorage.getItem("Jurisdiction");
    if (admid == 2) {
      id = localStorage.getItem("ID");
      this.newArr.adminId = id;
    }
    this.$store.dispatch("server/get", { id: id, size: "", current: "" });
  },
};
</script>

<style>
.infinite-list {
  display: flex;
}
.infinite-list-item {
  border: 1px solid;
  list-style: none;
  width: 180px;
  height: 180px;
}
img {
  width: 178px;
  height: 178px;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar-uploader {
  width: 178px;
  height: 178px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  margin: 10px;
}
li {
  list-style: none;
}
.box {
  height: 75px;
}
.img {
  width: 125px;
  height: 75px;
}
</style>